<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "dianrongqi",
    methods: {
    },
    props: {
        translateX: { type: Number, default: 0 },
        translateY: { type: Number, default: 0 },
        rotate: { type: Number, default: 0 },
        scale: { type: Number, default: 1 },
        name: { type: String, default: '' },
        jg_name:{
            type:String,
            default:''
        },
        brandInfo:{
            type: String,
            default: ""
        },
        data_id:{
            type: String,
            default: ''
        },
        stateDesc:{
            type: String,
            default: ""
        },
        isMainPage:{
            type: Boolean,
        },
        color:{
          type: String,
          default: '#fff'
        },
        swidth:{
            type: [Number,String],
            default: 2
        },
        hasBottom:{
            type: Boolean,
            default: true
        }
    },
    computed: {
        computedTransform() {
            return `
                translate(${this.translateX}, ${this.translateY})
                rotate(${this.rotate},1850,430)
                scale(${this.scale})
            `;
        },
    },
})
</script>

<template>
    <svg>
    <g :transform="computedTransform" style="cursor: pointer">
    <line x1="1830" y1="430" x2="1850" y2="430" :style="{stroke:color,strokeWidth:swidth}"/>
    <line x1="1830" y1="435" x2="1850" y2="435" :style="{stroke:color,strokeWidth:swidth}"/>

    <line x1="1840" y1="435" x2="1840" y2="445" :style="{stroke:color,strokeWidth:swidth}"/>
<g v-if="hasBottom">
    <line x1="1825" y1="445" x2="1855" y2="445" :style="{stroke:color,strokeWidth:swidth}"/>
    <line x1="1855" y1="440" x2="1855" y2="445" :style="{stroke:color,strokeWidth:swidth}"/>
    <line x1="1825" y1="440" x2="1825" y2="445" :style="{stroke:color,strokeWidth:swidth}"/>
</g>

    </g>
    </svg>
</template>

<style scoped lang="less">

</style>
